﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/CSS</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div.scroll{
                background: #ccc none repeat scroll 0 0;
                border: 3px solid #666;
                margin: 5px;
                padding: 5px;
                position: relative;
                width: 200px;
                height: 100px;
                overflow: auto;
            }            
		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		console.log( "jQuery version: " + $.fn.jquery );

        </script>
    </head>
    <body>
        <h1>jQuery/CSS部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">.hasClass()</td>
                <td>see attributes part</td>
            </tr>
            <tr>
                        <td class="syntax">.addClass()</td>
                <td>see attributes part</td>
            </tr>
            <tr>
                <td class="syntax">.removeClass()</td>
                <td>see attributes part</td>
            </tr>
            <tr>
                <td class="syntax">.toggleClass()</td>
                <td>see attributes part</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.escapeSelector()</td>
                <td>用于selector中含有css中有特别含义字符的情形, 例如含有'.'和'#'符号.</td>
            </tr>
            <tr>
                <td class="syntax">.css()</td>
                <td>取得和设置style property</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.cssHooks</td>
                <td>TODO</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.cssNumber()</td>
                <td>todo</td>
            </tr>
            <tr>
                <td class="syntax">.height()</td>
                <td>content height</td>
            </tr>
            <tr>
                <td class="syntax">.width()</td>
                <td>content width</td>
            </tr>
            <tr>
                <td class="syntax">.innerHeight()</td>
                <td>padding+content height</td>
            </tr>
            <tr>
                <td class="syntax">.innerWidth()</td>
                <td>padding+content width</td>
            </tr>
            <tr>
                <td class="syntax">.outerHeight()</td>
                <td>margin(可选) + border + padding + content height</td>
            </tr>
            <tr>
                <td class="syntax">.outerWidth()</td>
                <td>margin(可选) + border + padding + content width</td>
            </tr>
            <tr>
                <td class="syntax">.offset()</td>
                <td>document中的offset. 针对的是border-box</td>
            </tr>
            <tr>
                <td class="syntax">.position()</td>
                <td>相对于parent的pos. 针对的是margin-box</td>
            </tr>
            <tr>
                <td class="syntax">.scrollLeft()</td>
                <td>取得或设置滚动条当前的left位置. object应当拥有scrollbar.</td>
            </tr>
            <tr>
                <td class="syntax">.scrollTop()</td>
                <td>取得或设置滚动条当前的top位置. object应当拥有scrollbar.</td>
            </tr>
        </table>
        <p>html盒模型从外向内包括margin/border/padding/content几层. 所谓margin-box就是所有这些层, 而boder-box则不计margin层的剩余部分, content-box仅包含content部分.</p>
    <hr/>
    <p>see https://api.jquery.com/jQuery/#jQuery1</p>
    请打开console观察输出.
    
    <div id="undefinedColor" class="scroll" style="position:relative;border: 1px solid red;">
        <p id="res1" style="border: 1px solid red;margin-left: 10px;">待定颜色1</p>
        <p id="res2" style="border: 1px solid red">待定颜色2</p>
        <p id="res3">待定颜色3</p>
        <p>待定</p>
        <p>待定</p>
        <p>待定</p>
        <p id="resLast">待定</p>
    </div>
	<script>
        $("#res1").css("color", "red");
        $("#res2").css("color", "green");
        $("#res3").css("color", "blue");
        console.log($("#res1").css("color"));
    </script>

    <hr/>
    <button type="button" onclick="getScrollPos()">resLast scroll pos</button>
    <div id="res4"/>
    <script>
        var offs0 = $("#undefinedColor").offset();
        $("<p>div offset, left: "+offs0.left + ", top: "+offs0.top+"</p>").appendTo("#res4");

        var offs1 = $("#res1").offset();
        $("<p>res1 offset, left: " + offs1.left + ", top: " + offs1.top +"</p>").appendTo("#res4");
        var offs2 = $("#res2").offset();
        $("<p>res2 offset, left: "+offs2.left + ", top: "+offs2.top+"</p>").appendTo("#res4");
        
        //此例中, 当#undefinedColor的style中没有position:relative, 则无法取到相对于parent的pos.
        var pos0 = $("#undefinedColor").position();
        $("<p>div position, left: "+pos0.left + ", top: "+pos0.top+"</p>").appendTo("#res4");

        var pos1 = $("#res1").position();
        $("<p>res1 position, left: "+pos1.left + ", top: "+pos1.top+"</p>").appendTo("#res4");
        var pos2 = $("#res2").position();
        $("<p>res2 position, left: "+pos2.left + ", top: "+pos2.top+"</p>").appendTo("#res4");
    </script>

    <hr/>
    <script>

        function getScrollPos(){
            //$("#undefinedColor").scrollTop(300);
            console.log("div scroll posLeft="+ $("#undefinedColor").scrollLeft() + ", posRight=" +$("#undefinedColor").scrollTop());                
        }
    </script>
    </body>
</html>
